<template>
  <div class="video_page">
    <div class="video_header">
      <h2>{{ vidoeData.title }}</h2>
      <p class="clear">
        <span>作者：{{ vidoeData.writer }}</span
        ><span>时间：{{ vidoeData.time }}</span>
        <el-button
          type="primary"
          icon="el-icon-star-off"
          v-if="!colBtn"
          class="collBtn"
          @click="collectBtn"
          >收藏</el-button
        >
        <el-button
          type="info"
          icon="el-icon-star-on"
          v-if="colBtn"
          class="collBtn"
          @click="collectBtn"
          >已收藏</el-button
        >
      </p>
    </div>
    <div class="video_main">
      <div class="video_box" @click="play()">
        <video width="100%" height="100%" controls>
          <source
            :src="
              require('../../../../my-app-node/uploads/' +
                vidoeData.video_url)
            "
            type="video/mp4"
          />
        </video>
        <span class="el-icon-video-play" v-if="playBtn"></span>
      </div>
      <div class="video_syn">
        <h3>视频简介:</h3>
        <p v-for="(ifem, i) in vidoeData.synopsis" :key="i">{{ ifem }}</p>
      </div>
    </div>
    <LeaveWord :worksData="worksData"></LeaveWord>
  </div>
</template>

<script>
import axios from "axios";
import LeaveWord from "../../components/LeaveWord.vue";
export default {
  data() {
    return {
      vidoeData: {
        video_url: "mda-ka8z06c6wgwp1h0i.mp4",
      },
      playBtn: true,
      colBtn: false,
      id: null,
      worksData: {
        id: 0,
        type: 102,
      },
    };
  },
  components: { LeaveWord },
  created() {
    this.worksData.id = this.$route.query.video;
    this.getVideoData();
  },
  watch: {
    $route: {
      handler() {
        this.id = this.$route.query.video;
        this.getVideoData();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  methods: {
    play() {
      this.playBtn = !this.playBtn;
    },
    getVideoData() {
      var video_id = this.$route.query.video;
      var userId = JSON.parse(localStorage.getItem("token") || "{}").u_id;
      axios
        .post(`http://localhost:3000/getVideo`, { id: video_id, userId })
        .then((ret) => {
            console.log(ret.data);
          ret.data.videoData.synopsis = ret.data.videoData.synopsis.split("//");
          this.vidoeData = ret.data.videoData;
          ret.data.collect.forEach((e) => {
            if (e.c_works == ret.data.videoData.id) {
              this.colBtn = true;
              this.vidoeData.c_id=e.c_id;
            }
          });
        });
    },
    collectBtn(){
        if (this.colBtn) {
        axios
          .post(`http://localhost:3000/collectWork`, {
            collectId: this.vidoeData.c_id,
            collect: 1,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.colBtn = false;
              this.$message({
                showClose: true,
                message: "取消收藏",
                type: "warning",
              });
              this.$forceUpdate();
            }
          });
      } else {
        var userId = JSON.parse(localStorage.getItem("token") || "{}").u_id;
        axios
          .post(`http://localhost:3000/collectWork`, {
            userId,
            works:  this.vidoeData.id,
            type: 1,
            collect: 0,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "收藏成功",
                type: "success",
              });
              this.colBtn = true;
              this.$forceUpdate();
            }
          });
    }}
  },
};
</script>

<style scoped>
.video_page {
  padding: 20px;
}
.video_header {
  border-bottom: 1px solid #dcdfe6;
}
.video_header h2 {
  height: 50px;
  text-align: center;
  font: 26px/50px "";
  font-weight: 700;
}
.video_header p {
  padding: 20px;
}
.video_header p span {
  color: #909399;
  padding: 0 20px;
}
.video_main {
  padding: 40px 20px;
  color: #303133;
}
.video_box {
  width: 100%;
  height: 500px;
  position: relative;
}
.video_box span {
  font-size: 100px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.video_syn {
  margin: 20px 0;
  padding: 10px 0;
  border-top: 2px solid #dcdfe6;
}
.video_syn h3 {
  color: #909399;
}
.video_syn p {
  text-indent: 2em;
  padding: 5px 40px;
  color: #303133;
}
.collBtn {
  float: right;
}
</style>
